import React, {Component} from 'react';
import {View, StyleSheet, Image, Text, TouchableOpacity} from 'react-native';
import {mainBgColorWhite, px2dp} from '../../../../../common/styles';
import LinearGradient from 'react-native-linear-gradient';
import {iconShip} from '../../../../../image';
import {msg} from '../../../../../common';

export default class ReleaseSourceDot extends Component {
  render() {
    const {style} = this.props;
    return (
      <TouchableOpacity
        style={[styles.dotContainer, style]}
        onPress={() => {
          msg.emit('router: goToNext', {routeName: 'ReleaseSource'});
        }}>
        <LinearGradient
          style={styles.dot}
          stystart={{x: 1, y: 1}}
          end={{x: 1, y: 1}}
          colors={['#E5B867', '#BB934B']}>
          <Image
            source={iconShip}
            resizeMode="stretch"
            style={{width: px2dp(44), height: px2dp(44)}}></Image>
          <Text
            style={{
              fontSize: px2dp(20),
              color: mainBgColorWhite,
              marginTop: px2dp(8),
            }}>
            去发货
          </Text>
        </LinearGradient>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  dotContainer: {
    width: px2dp(144),
    height: px2dp(144),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(77),
    justifyContent: 'center',
    alignItems: 'center',
  },
  dot: {
    width: px2dp(120),
    height: px2dp(120),
    borderRadius: px2dp(60),
    justifyContent: 'center',
    alignItems: 'center',
  },
});
